<template>
    <div>
        <!-- 先布局，再对接数据 -->

        <!-- 当天疫情 -->
        <div>
            <div style="color:rgb(153,153,153);margin-bottom:10px;">2020-09-26</div>
            <el-row :gutter="20">
                <el-col :span="8" v-for="item in arr_today" :key='item.id'>
                    <div class="grid-content bg-purple">
                        <div>{{item.num}}</div>
                        <div>{{item.name}}</div>
                    </div>
                </el-col>
                
            </el-row>
        </div>

        <!-- 累计疫情 -->
        <div>
            <div style="color:rgb(153,153,153);margin-bottom:10px;">截止：{{time_now}}</div>
            <el-row :gutter="20">
                <el-col :span="8" v-for='item in arr_all' :key='item.id'>
                    <div class="grid-content bg-purple">
                        <div>{{item.num}}</div>
                        <div>{{item.name}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 国内疫情 -->
        <div class='country'>
            <div style="color:rgb(153,153,153);margin-bottom:10px;">国内疫情</div>
            <!-- 表头 -->
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">地区</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-light">新增确诊</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">新增疑似</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-light">新增死亡</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">新增治愈</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-light">境外输入</div>
                </el-col>
            </el-row>
            <!-- 表体 -->
            <el-row v-for='item in tableData' :key='item.id'>
                <el-col :span="4">
                    <div class="grid-content">{{item.province}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.confirmed}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.suspected}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.dead}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.cure}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.outside}}</div>
                </el-col>
            </el-row>
        </div>
        
        <!-- 最新新闻 -->
        <div>
            <div style="color:rgb(153,153,153);margin-bottom:10px;">最新进展</div>
            <div class='bg_item'>
                <div @click="showDetail(item)" class="item" v-for='item in news' :key='item.id'>
                    <div style="overflow:hidden;position: relative;">
                        <div class="circle"></div>
                        <div class="tag">最新</div>
                        <div class="time">{{item.publishTime}}</div>
                    </div>
                    <div class="content">{{item.title}}</div>
                </div>
            </div>
        </div>

        <!-- 新闻详情模态框 -->
        <el-dialog
            title="新闻详情"
            :visible.sync="dialogVisible"
            width="80%">
            <!-- v-html可以渲染具有html标签的内容 -->
            <span v-html='news_detail.content'></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from '@/http/axios'
import moment from 'moment'
export default {
    data(){
        return {
            arr_today:[],
            arr_all:[],
            time_now:'',
            tableData:[],
            news:[],
            dialogVisible:false,
            news_detail:{}
        }
    },
    created(){
        this.find_today()
        this.find_all()
        this.findNews()
    },
    methods:{
        // 显示详情
        showDetail(item){
            // 1. 显示模态框
            this.dialogVisible = true
            // 2. 将当前行数据放入模态框
            this.news_detail = item
        },
        // 查询最新的新闻
        findNews(){
            axios({
                url:'http://39.96.21.48:8001/article/pageQuery',
                method:'get',
                params:{
                    page:1,
                    pageSize:1000,
                    categoryId:3
                }
            }).then((res)=>{
                this.news = res.data.data.list
            })
        },
        // 查询累计疫情数据
        find_all(){
            axios({
                url:'http://39.96.21.48:8001/epidemic/pageQuery',
                method:'get',
                params:{
                    page:1,
                    pageSize:10000
                }
            }).then((res)=>{
                // 将结果赋值给国内疫情模块
                this.tableData = res.data.data.list
                // 获取疫情数据的截止时间，也就是当前数组中的第一个对象中的输入时间
                this.time_now = moment(res.data.data.list[0].inputTime).format('YYYY-MM-DD HH:mm')
                var confirmed_all = 0;
                var dead_all = 0;
                var outside_all = 0;
                var cure_all = 0;
                var severe_all = 0;
                var suspected_all = 0;
                res.data.data.list.forEach((item)=>{
                    confirmed_all += item.confirmed
                    dead_all += item.dead
                    outside_all += item.outside
                    cure_all += item.cure
                    severe_all += item.severe
                    suspected_all += item.suspected
                })
                var obj1 = {
                    id:1,
                    name:'累计确诊',
                    num:confirmed_all
                }
                var obj2 = {
                    id:2,
                    name:'累计死亡',
                    num:dead_all
                }
                var obj3 = {
                    id:3,
                    name:'累计境外输入',
                    num:outside_all
                }
                var obj4 = {
                    id:4,
                    name:'累计治愈',
                    num:cure_all
                }
                var obj5 = {
                    id:5,
                    name:'累计存活',
                    num:severe_all
                }
                var obj6 = {
                    id:6,
                    name:'累计疑似',
                    num:suspected_all
                }
                this.arr_all.push(obj1,obj2,obj3,obj4,obj5,obj6)
            })
        },
        // 查询当天疫情数据
        find_today(){
            // 获取当前时间
            var date = new Date()
            axios({
                url:'http://39.96.21.48:8001/epidemic/pageQuery',
                method:'get',
                params:{
                    page:1,
                    pageSize:10000,
                    inputTime:moment(date).format('YYYY-MM-DD')
                }
            }).then((res)=>{
                var confirmed_today = 0;
                var dead_today = 0;
                var outside_today = 0;
                res.data.data.list.forEach((item)=>{
                    confirmed_today += item.confirmed
                    dead_today += item.dead
                    outside_today += item.outside
                })
                var obj1 = {
                    id:1,
                    name:'新增确诊',
                    num:confirmed_today
                }
                var obj2 = {
                    id:2,
                    name:'新增死亡',
                    num:dead_today
                }
                var obj3 = {
                    id:3,
                    name:'境外输入',
                    num:outside_today
                }
                this.arr_today.push(obj1,obj2,obj3)
            })
        }
    }   
}
</script>


<style>
  .grid-content div {
      height: 40px;
      line-height: 40px;
      text-align: center;
  }
  .bg_item {
      background-color: rgb(248,248,248);
      padding:20px;
  }
  .content {
      background-color:white;
      height: 50px;
      line-height:50px;
      border-radius:4px;
      margin-top:5px;
  }
  .item {
      margin-bottom:10px;
  }
  .circle , .tag , .time {
      float: left;
      margin-left: 10px;
  }
  .tag {
      margin-left:20px;
      background-color: red;
      border-radius: 4px;
      color:white;
      padding:4px;
      font-size:14px;
  }
  .time {
      font-weight:600;
      line-height: 24px;
  }

  .circle {
      height: 10px;
      width:10px;
      border-radius: 100%;
      background-color:blue;
      /* 元素垂直居中 */
      position:absolute;
      top:0;
      bottom:0;
      margin: auto 0;
  }
  .grid-content div:first-child {
      color:rgb(255,105,0);
      font-weight: 700;
  }
  .country .el-col {
      margin-bottom:0;
  }
  .el-col {
    border-radius: 4px;
    margin-bottom:10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    /* border-radius: 4px; */
    min-height: 80px;
    line-height:80px;
    text-align: center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>